<template>
  <div style="height: 100%; display: flex; flex-direction: column;" v-cloak>
    <BreadFadeWidget ref="refBread" :start-index="2" style="padding: 8px 4px 0 8px"
                     :root-path="config.rootItem" :detail-label="config.detail" :trigger-path="triggerPath"/>
    <TableHeaderWidget :header="current().name"/>
    <UserList ref="refList" v-show="config.isRoot" :load-user="loadUserOfPlatform" :product="false"
              :can-edit="false" :create-label="''" :entry="{server: SERVERS.PLATFORM, name: currentNames.PLAT_USER}" />
    <PlatformUserDetail ref="refDetail" v-show="!config.isRoot"/>
  </div>
</template>

<script setup lang="ts" name="userList">
import {ref} from "vue";
import {currentNames, SERVERS} from "@/stores/conf";
import {useListPage} from "@/utils/sop/UseListPage";
import UserList from "@/views/sop/list/UserList.vue";
import BreadFadeWidget from "@/widget/BreadFadeWidget.vue";
import TableHeaderWidget from "@/widget/TableHeaderWidget.vue";
import PlatformUserDetail from "@/views/pages/UserMng/PlatformUserDetail.vue";
import {platformLoadUserPage} from "@/apis/sop";
import {useStore} from "@/stores";

const store = useStore();

/**
 * 读取分配给当前平台的用户信息
 * @param params 分页参数
 */
const loadUserOfPlatform = async (params: any) => {
  let result;
  const platform: any = store.getCurrentPlatform();

  if (platform?.id) {
    result = await platformLoadUserPage({
      realmId: platform.realmId,
      platformId: platform.id,
      ...params
    });
  }

  return result;
}

const config = ref({
  isRoot: true,
  detail: '用户详情',
  rootItem: {id: '',name: '用户列表',}
});

const {refBread, refList, refDetail, current, triggerPath} = useListPage(currentNames.PLAT_USER, config.value);

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

.fade-leave-to {
  display: none;
}

</style>
